<template>
  <div class="filter-item" v-if="createType">
    <el-button type="primary" icon="el-icon-edit" @click="createOrder">创建{{createTypeText}}</el-button>

    <el-dialog :title="'选择'+createUpTypeText" :visible.sync="dialogFormVisible" width="888px">
      <el-table class="orderUpTable" :data="orderUpList" style="width: 100%" highlight-current-row
        @current-change="handleCurrentChange">
        <el-table-column label="订单编号" prop="identifier" align="center" />
        <el-table-column label="供应商名称" prop="gongyingName" v-if="userInfo.type === 1" align="center" />
        <el-table-column label="采购商名称" prop="caigouName" v-else-if="userInfo.type === 2" align="center" />
        <el-table-column label="实付款（元）" prop="totalAmount" align="center" />
        <el-table-column label="订单总数量" prop="totalNum" align="center" />
        <el-table-column label="订单状态" prop="statusText" align="center" />
        <el-table-column label="订单提交时间" prop="createTime" align="center" />
        <el-table-column label="订单确认时间" prop="handleTime" align="center" />
        <el-table-column label="订单物流信息" prop="logicRemark" v-if="type===3" align="center" />
        <el-table-column label="订单类型" prop="typeText" align="center" />
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="handleCreate()">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { orderListAble } from '@/api/mall'
export default {
  name: "createButton",
  props: {
    type: {
      type: Number,
      default: () => 1,
    },
    userInfo: {
      type: Object,
      default: () => ({}),
    },
    orderStatusJson: {
      type: Array,
      default: () => [],
    },
    orderTypeJson: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      createType: "",
      createTypeText: "",
      createUpTypeText: "",
      orderUpList: [],
      orderUpListSelect: {},
      dialogFormVisible: false,
    };
  },
  watch: {
    type(val) {
      this.$nextTick(() => {
        this.isShow();
      });
    },
    userInfo(val) {
      this.$nextTick(() => {
        this.isShow();
      });
    },
  },
  created() {
    this.$nextTick(() => {
      this.isShow();
    });
  },
  methods: {
    getOrderUpList(type) {
      orderListAble(type).then(response => {
        this.orderUpList = response
      })
    },
    isShow() {
      let typeIndex = -1;
      this.orderTypeJson.some((item, index) => {
        if (this.type === item.value) {
          typeIndex = index;
          if (item.createChooseName) {
            this.createType = item.value;
            this.createTypeText = item.label;
            this.createUpTypeText = item.createChooseName;
          }
          return true;
        }
      });
      //类型
      if (typeIndex === -1 || !this.checkButtonPermission('save')) {
        this.resetData()
        return false;
      }
    },
    resetData() {
      this.createType = "";
      this.createTypeText = "";
      this.createUpTypeText = "";
    },
    handleCreate() {
      if (!this.orderUpListSelect || !this.orderUpListSelect.id) {
        this.$message.error(`请选择${this.createUpTypeText}`)
        return
      }
      this.dialogFormVisible = false
      this.$emit(
        "handleCreate",
        this.orderUpListSelect.id,
        this.createType,
        this.createTypeText,
        this.createUpTypeText
      );
    },
    createOrder() {
      this.getOrderUpList(this.type)
      this.dialogFormVisible = true;
    },
    handleCurrentChange(val) {
      this.orderUpListSelect = val
    }
  },
};
</script>

<style lang="scss">
.orderUpTable {
  tr.current-row {
    td {
      &:last-child {
        position: relative;
        overflow: hidden;
        &::after {
          content: "已选择";
          position: absolute;
          top: 10px;
          right: -26px;
          height: 26px;
          width: 100px;
          background: red;
          text-align: center;
          font-size: 13px;
          color: #fff;
          line-height: 26px;
          transform: rotate(45deg);
        }
      }
    }
  }
}
</style>